// 定义消息组件
import {BaseElement, ChatStatus, baseStyle} from "./base.js";
/**
 * 消息提示组件
 */
class MsgTip extends BaseElement {


    //完善MsgTip 组件，组件用于在 聊天消息中插入一些提示语，提示语通过 组件的content属性传入，组件还支持几种样式，info, error, success,
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
    }

    render() {

        const type = this.getAttribute('type') || 'info';

        this.shadowRoot.innerHTML = `
            <style>
                .msg-tip { padding: 12px 12px; border-radius: 8px; margin: 8px 0; font-size: 14px;word-break: break-all }
                .msg-tip.info { background: #e6f4ff; border: 0px solid #91caff; color: #1677ff; }
                .msg-tip.error { background: #fff2f0; border: 0px solid #ffccc7; color: #ff4d4f; }
                .msg-tip.success { background: #f6ffed; border: 0px solid #b7eb8f; color: #52c41a; }
            </style>
            <div class="msg-tip ${type}"><slot></slot></div>
        `;
    }


}

export default MsgTip;